<template>
  <view class="home-container">
	<image class="bg-img" src="/static/images/indexBg.jpg"/>
    <!-- 我的家 -->
    <view class="cu-bar">
    	<view class="action" @tap="changHome">
    		<text class="cuIcon-homefill text-blue"/>
			<text class="down-icon cuIcon-triangledownfill text-white"/>
			<text class="text-white text-cut" style="width: 400rpx;">{{curHome?curHome.name:'我的家'}}</text>
    	</view>
    	<view class="action">
    		<view class="text-white" @tap="noticeHandle">
				<text class="baseicon-notice tz"/>
    			<view class="cu-tag badge">
    				<block>99</block>
    			</view>
    		</view>
    	</view>
    </view>
	<view catchtouchmove='return'>
	<uni-popup ref="homePopTop" type="top" :maskClick="true">
				<view class="padding-sm bg-white text-xxl home-title solid-bottom">
					家庭管理
					<text class="baseicon-system fr" @tap="homeAdmin"/>
				</view>
					<radio-group class="block" @change="radioChange">
						<view class="cu-list menu text-left">
							<view class="cu-item" v-for="(item,index) in myHomes" :key="index">
								<label class="flex justify-between align-center flex-sub">
									<view class="">
										<text class="cuIcon-homefill text-blue padding-right-xs"/>{{item.name}}
									</view>
									<radio class="round" :class="item.current?'checked':''" :checked="item.current?true:false"
									 :value="index"></radio>
								</label>
							</view>
						</view>
					</radio-group>
	</uni-popup>
	</view>
	<view class="flex padding-sm align-center">
		<image class="padding-sm tq" src="/static/images/tq.png"/>
		<view class="wd text-white">27°</view>
		<view class="dzqh text-white"><view class="">锦江区</view><view>多云</view></view>
		<view class="line"/>
		<view class="dzqh  text-white"><view class="kqsd"><image class="kq" src="/static/images/kq.png"/>空气质量:良</view><view class="kqsd"><image class="kq" src="/static/images/sd.png"/>湿度:70%</view></view>
	</view>
	<view class="cj-title">
		<text class="u-demo-block__title  text-white">常用场景</text>
		<u-scroll-list
			:indicator="false"
			@right="right"
			@left="left"
		>
			<view
				class="scroll-list"
				style="flex-direction: row;"
			>
				<view
					class="scroll-list__goods-item"
					v-for="(item, index) in demoArr"
					:key="index"
					:class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']"
				>
					<view class="scroll-list__goods-item__image bg-white">
						<text class="sc-text" :class="item.isCollect?'baseicon-collect text-grey':'baseicon-no-collect'" @tap="sceneCollectChang(item,index)"/>
						<text class="baseicon-rightarrow right-text"  @tap="getSceneInfo"/>
						<view class="cuIcon-repair kz-text"  @tap="sceneHandle"></view>
						<view class="cj-text">灯光全开</view>
					</view>
				</view>
				<view  v-if="demoArr.length>=4"
					class="scroll-list__show-more"
					@tap="showMore"
				>
					<text class="scroll-list__show-more__text">查看更多</text>
					<u-icon
						name="arrow-leftward"
						color="#f56c6c"
						size="12"
					></u-icon>
				</view>
			</view>
		</u-scroll-list>
	</view>
    <view class="cy-device  text-white">
    	常用设备
    </view>
    <view class="nav-list">
    	<view hover-class="none" class="nav-li bg-white" 
    	  v-for="(item,index) in devices" :key="index">
		  <device :deviceObj="item" @renewData="getCollectDevices"/>
    	</view>
    </view>
  </view>
</template>

<script>
import { getCollectDevices } from "@/api/system/device"
import { getUserHomes,changCurrentHome } from "@/api/system/space"
import device from "@/components/device"
  export default {
	  components:{
		  device
	  },
	  data() {
	  	return {
	  		devices: [],
			myHomes:[],
			demoArr: [{},{},{}
			],
	  	};
	  },
    async onShow(){
		await this.getCollectDevices()
    },
	computed: {
		curHome() {
		  return this.$store.state.user.home
		}
	},
	methods: {
		async getCollectDevices() {
			await getCollectDevices().then( res => {
				  this.devices=res
			})
		},
		showMore(){
			this.$modal.showToast('显示更多')
		},
		noticeHandle(){
			this.$modal.showToast('通知处理')
		},
		changHome(){
			getUserHomes().then(res => {
				this.myHomes=res
				this.$refs['homePopTop'].open();
			})
		},
		getSceneInfo(){
			this.$modal.showToast('查看场景')
		},
		sceneHandle(item){
			this.$modal.showToast('触发场景：灯光全开')
		},
		radioChange(e){
			changCurrentHome(this.myHomes[e.detail.value]).then(res => {
				this.$refs['homePopTop'].close();
				this.$store.commit('SET_HOME', this.myHomes[e.detail.value])
				this.$modal.showToast('家庭切换至：'+this.curHome.name)
			})
		},
		sceneCollectChang(item,index){
			item.isCollect=item.isCollect?false:true
			this.$set(this.goodsArr, index, item)
			this.$modal.showToast(item.isCollect?'添加常用':'取消常用')
		},
		homeAdmin(){
			this.$modal.showToast('家庭管理建设中...')
		}
	}
  }
</script>

<style lang="scss">
	.tz{
		font-size: 50rpx;
	}
/* #ifndef APP-NVUE */
  page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #fff;
    min-height: 100%;
    height: auto;
  }

  view {
    font-size: 14px;
    line-height: inherit;
  }

  /* #endif */
	.down-icon{
		font-size: 46rpx !important;
		margin-right: 0em;
	}
	.home-text{
		font-size: initial;
		}
  .text {
    text-align: center;
    font-size: 26rpx;
    margin-top: 10rpx;
  }
  .cj-title{
	  margin-left: 20rpx;
	  margin-right: 20rpx;
  }
  .right-text{
	  float: right;
  }
  .cy-device{
	  margin-left: 20rpx;
	  margin-bottom: 20rpx;
  }
  .kz-text{
	  text-align: center;
	  font-size: 150%;
  }

  .cj-text{
	  font-weight: 600;
	  text-align: center;
  }
  .tq{
	  width: 150rpx;
	  height: 150rpx;
  }
  .kq{
  	  width: 50rpx;
  	  height: 50rpx;
	  margin-right: 10rpx;
  }
  .wd{
	  font-size: 100rpx;
	  color: white;
  }
  .dzqh{
	  margin-left: 10rpx;
  }
  .kqsd{
	  display: -webkit-flex;
	  align-items: center;
  }
  .line{
	float: left;
	width: 2rpx;
	height: 70rpx;
	margin-left: 10rpx;
	background:#f3f3f3;
  }
  .home-title{
	  height: 100%;
	  line-height: 100%;
	  font-weight: 600;
	  padding-bottom: 20rpx;
  }
  .scroll-list {
  	@include flex(column);
  
  	&__goods-item {
  		margin-right: 10px;
		padding-top: 10px;
  		&__image {
  			width: 94px;
  			height: 65px;
  			border-radius: 12rpx;
  		}
  
  		&__text {
  			color: #f56c6c;
  			text-align: center;
  			font-size: 12px;
  			margin-top: 5px;
  		}
  	}
  
  	&__show-more {
  		background-color: #fff0f0;
  		border-radius: 3px;
  		padding: 3px 6px;
  		@include flex(column);
  		align-items: center;
  
  		&__text {
  			font-size: 12px;
  			width: 12px;
  			color: #f56c6c;
  			line-height: 16px;
  		}
  	}
  }
</style>
